<template>
  <div>子组件</div>
  <h2>-----异步加载组件-----</h2>
  <deep-child></deep-child>
  <h2>-----插件-----</h2>
  <div>{{ $translate("greetings.surname") }}</div>
  <h2>-----动画-----</h2>
  <button @click="show = !show">Toggle</button>
  <Transition>
    <p v-if="show">hello</p>
  </Transition>
  <h2>-----命名动画</h2>
  <el-button @click="nameShow = !nameShow">命名动画</el-button>
  <Transition name="an">
    <p v-if="nameShow">带有名称的动画</p>
  </Transition>
  <h2>-----列表动画-----</h2>
  <el-button @click="addNumber">添加一项</el-button>
  <el-button @click="deleteNumber">删除一项</el-button>
  <TransitionGroup name="list">
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </TransitionGroup>
  <h2>-----Teleport-----</h2>
  <button @click="open = true">Open Modal</button>
  <Teleport to="body">
    <!-- 使用这个 modal 组件，传入 prop -->
    <model-comp :show="open" @close="open = false">
      <template #header>
        <h3>Custom Header</h3>
      </template>
    </model-comp>
  </Teleport>
</template>
<script setup>
import loadingComponent from "./loadingComponent.vue";
import errorComponent from "./errorComponent.vue";
import ModelComp from "./ModelComp.vue";

import { defineAsyncComponent, ref } from "vue";

const DeepChild = defineAsyncComponent({
  loader: () => import("./DeepChild.vue"),
  loadingComponent: loadingComponent,
  delay: 20,
  errorComponent: errorComponent,
  timeout: 1000,
});
// 动画
const show = ref(true);
const nameShow = ref(true);

// 列表动画 增删
const items = ref([1, 2, 3, 4]);
function addNumber() {
  items.value.push(items.value.length + 1);
}
function deleteNumber() {
  items.value.shift();
}

// Teleport 传送
const open = ref(false);
</script>

<style lang="scss" scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.an-enter-active,
.an-leave-active {
  transition: opacity 0.5s ease;
}

.an-enter-from,
.an-leave-to {
  opacity: 0.5;
}

.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

// Teleport 传送
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>
